<template>
    <div>
        <ul>
            <!-- 无key的情况是就地复用
            将key设置为index，更新时按照key进行对比结果依然和就地复用一样 -->
            <!-- key的要求：必须是字符串或数字，还得是唯一的 -->
            <!-- 将key设置为index，更新时按照key进行对比，结果变成更少的dom操作 -->
            <!-- 结论：有id设置为id，无id设置为索引 -->
            <li v-for="item in arr" :key="item.id">
                {{item.name}}
                <input type="text" />
            </li>
        </ul>
        <button @click="insert">插入一个新来的</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr:[
                {id:50,name:"老大"},
                {id:31,name:"老二"},
                {id:10,name:"老三"},
            ]
        };
    },
    methods: {
        insert(){
            //参数1：从哪里开始删除
            //参数2：删除几个
            //参数3：插入新元素
            this.arr.splice(1,0,{id:20,name:"新来的"})
        }
    },
};
</script>

<style lang="scss" scoped>

</style>